<template>
  <div>
    <el-card class="box-card" shadow="never" border="false">
  <template #header>
      <div v-show="subjectID">
        <el-breadcrumb  separator-class="el-icon-arrow-right">
  <el-breadcrumb-item>学科管理</el-breadcrumb-item>
  <el-breadcrumb-item>{{subjectObj.subjectName}}</el-breadcrumb-item>
  <el-breadcrumb-item>目录详情</el-breadcrumb-item>
</el-breadcrumb>
  <el-divider></el-divider>
    </div>
    <div class="header">
      <span class="name">标签名称</span>
      <el-input class="search" v-model="queryObj.tagName" ></el-input>
      <span class="name">状态</span>
      <el-select class="search" v-model="queryObj.state" placeholder="请选择">
    <!-- TODO选项option -->
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      <el-button @click="clear">清空</el-button>
      <el-button type="primary" @click="searchName">搜索</el-button>
      <el-button style="float: right" type="success" @click="open('add')"> <svg-icon icon-class="edit"></svg-icon> 新增目录</el-button>
        <el-button v-show="subjectID" style="float: right" type="text" icon="el-icon-back" @click="$router.push('list')">返回学科</el-button>
    </div>
    <el-alert
    :title="`共 ${total} 条记录`"
    effect="dark"
    :closable="false"
    show-icon
    type="info">
  </el-alert>

  </template>
 <el-table :data="tableData" stripe style="width: 100%"  v-loading="loading"    highlight-current-row>
      <el-table-column prop="id" label="序号" width="100" ></el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="100"   ></el-table-column>
          <el-table-column prop="tagName" label="标签名称" header-align="center" align="center" > </el-table-column>
          <el-table-column prop="username" label="创建者" header-align="center" align="center" > </el-table-column>
          <el-table-column prop="addDate" label="创建时间"  header-align="center" align="center"></el-table-column>
           <el-table-column prop="state" label="状态" header-align="center" align="center" >
            <template #default="{ row }">
               <span>{{row.state?'已启用':'已禁用'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300" header-align="center" align="center">
            <template #default="{ row }">
              <div class="actions">
                <el-button  type="text" v-if="!row.state" @click="getNewState(row.id,row.state)" >启用</el-button>
                 <el-button  type="text" v-else  @click="getNewState(row.id,row.state)" >禁用</el-button>
                  <el-button  type="text"  @click="open('edit',row.id)" :disabled="row.state===1? true:false">修改</el-button>
                  <el-button type="text" :disabled="row.state===1? true:false || row.totals>0? true:false"  @click="del(row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

     <div class="pagination">   <PageTool :total="total"
         :paginationPage="queryObj.page"
         :paginationPagesize="queryObj.pagesize"
         @pageChange="onPageChange"
         @pageSizeChange="onPageSizeChange"
        ></PageTool>
        </div>
</el-card>
<TagAdd
 ref="editDirectory"
 :dialogShow.sync="dialogShow"
 :pageTitle="pageTitle"
:subjectID="subjectID"
></TagAdd>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/subjects.js'
import TagAdd from '@/module-hmmm/components/tags-add'
import { getNewDate } from '@/utils'
import PageTool from '@/module-manage/components/page-tool'
import { list, remove, changeState } from '@/api/hmmm/tags.js'
export default {
  components: {
    TagAdd,
    PageTool
  },
  data () {
    return {
      subjectID: this.$route.params.id,
      subjectObj: {},
      loading: false,
      tableData: [],
      total: 0,
      queryObj: {
        page: 1,
        pagesize: 10,
        state: null,
        tagName: null
      },
      type: '',
      dialogShow: false,
      options: [{ value: 0, label: '禁用' }, { value: 1, label: '启用' }]

    }
  },

  async created () {
    this.initData()
  },

  methods: {
    async initData () {
      this.loading = true

      if (this.subjectID) {
        this.subjectObj.id = this.subjectID
        const res = await detail(this.subjectObj)
        this.queryObj.subjectID = this.subjectID
        this.subjectObj.subjectName = res.data.subjectName
      }
      const res = await list(this.queryObj)
      this.tableData = res.data.items
      this.total = res.data.counts
      this.loading = false
      this.tableData.forEach(item => {
        item.addDate = getNewDate(item.addDate)
      })
    },

    onPageSizeChange (val) {
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.initData()
    },
    onPageChange (val) {
      this.queryObj.page = val
      this.initData()
    },
    async getNewState (id, state) {
      const obj = { id, state }
      if (state === 0) {
        obj.state = 1
      } else if (state === 1) {
        obj.state = 0
      }

      await changeState(obj)
      this.initData()
    },

    async del (id) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const obj = { id }
        await remove(obj)
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async  open (type, id) {
      this.dialogShow = true
      this.type = type

      if (this.type === 'edit') {
        this.$refs.editDirectory.hanldeEditForm(id)
      }
    },

    clear () {
      this.queryObj.state = null
      this.queryObj.tagName = null
      this.initData()
    },
    searchName () {
      this.initData()
      // this.$nextTick(() => {
      //   this.tableData = this.renderList
      // })
    }
  },
  computed: {
    pageTitle () {
      if (this.type === 'add') return '新增目录'
      if (this.type === 'edit') return '修改目录'
      else return 'add'
    },
    renderList () {
      return this.tableData.filter(item => item.subjectName.includes(this.input))
    }
  }
}
</script>

<style scoped lang='less'>
/deep/ .el-alert--info.is-dark{
  background-color: #f4f4f5;
  color:#909399
}
/deep/ .el-table th {
  background-color: #fafafa;
}
.box-card{
  margin: 10px auto;
  width: 95%;
  padding: 20px;
  border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
     .pagination{
  margin-top: 10px;
  float: right;
 }
}
 .header{
  margin-bottom: 10px;
  /deep/ .name{
    font-weight: 999;
    color: #626066;
    margin-right:10px ;
  }
  .search{
  width: 200px;
  margin-right: 20px;
 }

 }
</style>
